<template>
    <li>
        <input type="checkbox" :checked="todo.done" @change="Check(todo.id)" />

        <!-- <input type="checkbox" v-model="todo.done"/> -->
        <p>{{ todo.title }}</p>
        <a href="#" @click="handleDelete(todo.id)"></a>
    </li>
</template>

<script>
export default {
    name: "Item",
    //声明接收todo对象
    props: ["todo", "checkTodo", "deleteTodo"],
    methods: {
        //取消勾选
        Check(id) {
            //通知App组件将对应的todo对象的done值取反
            this.checkTodo(id)
        },
        //删除
        handleDelete(id) {
            if (confirm('确定删除吗？')) {
                //通知App组件将对应的todo对象删除
                this.deleteTodo(id)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
li {
    width: 600px;
    height: 32px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-left: 5px solid #629a9c;
    border-radius: 3px;
    margin-bottom: 10px;
}

input {
    width: 22px;
    height: 22px;
    margin-left: 20px;
    margin-right: 15px;
    cursor: pointer;
}

p {
    flex: 1;
}

a {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    border: 6px double #fff;
    margin-right: 10px;
    background: #ccc;
    line-height: 14px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

a:hover {
    background-color: red;
}
</style>